<template>

    <mi-dialog v-model="areaTree.show" destroy-on-close title="选择城市" width="600px">

        <div>
            <el-tree-v2 ref="treeRef"
                        :data="areaTree.list"
                        :props="{value:'id', label: 'title', children:'children'}"
                        show-checkbox
                        :height="500"></el-tree-v2>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeTree">取消</el-button>
                <el-button type="primary" @click="areaTreeConfirm">确定</el-button>
            </span>
        </template>

    </mi-dialog>

    <el-form style="width: 100%"
             v-if="edit.info.regionsNo"
             ref="regionsFormRef"
             :model="edit.info.regionsNo"
    >
        <el-scrollbar>

            <el-space wrap>
                <div v-for="voo in edit.info.regionsNo.regionInfoArr">
                    <span>{{voo.title}}</span>
                    <template v-if="voo.children.length>0">
                        <el-tag size="small" effect="plain" v-for="city in voo.children">
                            <span>{{city.title}}</span>
                            <template v-if="city.children.length>0">
                                (
                                <span v-for="district in city.children" class="f_secondary">{{district.title}}</span>
                                )
                            </template>
                        </el-tag>
                    </template>
                </div>
            </el-space>

            <el-button link type="primary" @click="delRegion">删除</el-button>

        </el-scrollbar>
    </el-form>


    <div v-else>
        <el-link type="warning" @click="openTree">为指定区域设置运费</el-link>
    </div>


</template>

<script setup lang="ts">


import {inject, onBeforeMount, reactive, ref} from "vue";
import area from "@/service/area";
import Edit from "@/model/edit";
import {ElTreeV2, FormInstance} from "element-plus";

const edit = inject<Edit>("edit", new Edit({}))
const areaTree : Record<string, any> = reactive({
    show:false,
    list:[],
    index:-1,
})
const treeRef = ref<InstanceType<typeof ElTreeV2>>()
const regionsFormRef = ref<FormInstance>()

const closeTree = () =>{
    areaTree.show = false
}

const openTree = () => {
    areaTree.show = true
}

const delRegion = (i:number)  => {
    edit.info.regionsNo = null
}

const areaTreeConfirm = () => {
    const checked : any[] = treeRef.value?.getCheckedKeys() || []
    // const nodes = treeRef.value?.getCheckedNodes()
    const checkedInfo = getCheckedInfo(areaTree.list, checked)

    edit.info.regionsNo = {
        regionIdArr: checked,
        regionInfoArr: checkedInfo
    }
    // 关闭弹窗
    closeTree()

}

const getCheckedInfo = (areaList:any[], checkedIds:any[]) => {
    const checkedInfoArr  = new Array()
    for (let li of areaList){
        if (checkedIds.includes(li.id)){    // 选中，加入选中列表中
            checkedInfoArr.push({
                id:li.id,
                title:li.title,
                children:[],
            })
        }else{  // 未选中，查询下级
            const childrenArr = getCheckedInfo(li.children, checkedIds)
            if (childrenArr.length>0){  // 有选中的下级，将当前地区和选中的下级加入到选中列表中
                checkedInfoArr.push({
                    id:li.id,
                    title:li.title,
                    children:childrenArr
                })
            }
        }
    }

    return checkedInfoArr

}


/**
 * 所有地区的树形数组
 */
const getAreas = () => {
    area.getChildrenTree().then(tree => {
        areaTree.list = tree
    })
}

onBeforeMount(() => {
    getAreas()
})


</script>

<style scoped>

</style>
